<script lang="ts" setup>
import Vditor from "vditor";
import "vditor/dist/index.css";

type Mode = "sv" | "ir" | "wysiwyg";

const props = withDefaults(
  defineProps<{
    modelValue: string;
    height?: number | string;
    width?: number | string;
    mode?: Mode;
  }>(),
  {
    height: 300,
    width: "auto",
    mode: "ir",
  }
);
const emit = defineEmits(["update:modelValue"]);

const vditor = ref<Vditor | null>(null);
onMounted(() => {
  vditor.value = new Vditor("vditor", {
    after() {
      vditor.value!.setValue(props.modelValue);
    },
    input(val) {
      emit("update:modelValue", val);
    },
    height: props.height,
    width: props.width,
    mode: props.mode,
  });
});
onUnmounted(() => {
  vditor.value?.destroy();
});
</script>
<template>
  <div id="vditor" />
</template>
